<template>
    <div>
        <h1>代办事项</h1>
        <!-- 条件渲染：如果没有事项，显示暂无待办事项-->
        <p v-if = "todos.length === 0">暂无代办事项</p>
        <ul v-else>
            <!-- 列表渲染：显示待办事项-->
            <li v-for = "(todo, index) in todos" :key = "index">
                <!-- 属性绑定：通过v-bind 绑定样式-->
                <span>{{ todo.text }}</span>
                <button @click="removeTodo(index)">删除</button>
            </li>
        </ul>

        <!-- 双向数据绑定：通过v-model绑定输入框-->
        <input v-model="newTodo" :placeholder="inputPlaceholder"/>
        <button @click="addTodo">添加</button>

        <!-- 内容渲染显示待办事项的数量-->
        <p>当前代办事项数量：{{ todos.length }}</p>
    </div>
</template>

<script setup>
import {ref, reactive} from 'vue'

//待办事项列表
const todos = reactive([])

//绑定输入框
const newTodo = ref('')

//placeholder
const inputPlaceholder = ref('请输入代办事项')

//删除待办事项
const removeTodo = (index) => {
    todos.splice(index, 1)
}

//添加待办事项
const addTodo = () => {
    if(newTodo.value.trim() !== '') {
        todos.push({text: newTodo.value, completed: false})
        newTodo.value=''
    }
}
</script>